<!DOCTYPE html>
<html>

<head>
	<title>用户</title>
</head>

<body>
	<div style="padding: 16px;">
		<div class="layui-card">
			<div class="layui-card-body">
				<form id="searchbar" class="layui-form" onsubmit="javascript:return false;">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">用户名</label>
							<div class="layui-input-block">
								<input class="layui-input" type="text" name="username">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn layui-btn-primary" data-toggle="tableSearch"><i
									class="layui-icon layui-icon-search"></i></button>
						</div>
					</div>
				</form>
				<table id="tableUser" lay-filter="tableUser"></table>
				<script type="text/html" id="toolbar">
		  		<div class="layui-btn-container">
		    		<button class="layui-btn layui-btn-sm layui-hide" data-perm="user/add" onclick="add()"><i class="layui-icon layui-icon-addition"></i>添加</button>
		  		</div>
				</script>
				<script type="text/html" id="handbar">
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="user/edit" lay-event="custom" data-handle="edit" title="编辑"><i class="layui-icon layui-icon-edit icon-edit"></i></a>
		  		<a class="layui-hide" href="javascript:void(0)" data-perm="user/delete" lay-event="custom" data-handle="deleteHandle" title="删除"><i class="layui-icon layui-icon-delete icon-dele"></i></a>
				</script>
			</div>
		</div>
	</div>

	<script id="dialog" type="text/html">
		<div id="dialogContent" style="padding: 20px;">
		<form  class="layui-form" id="dialogForm" lay-filter="dialogForm" onsubmit="return beforeSubmit();" >
			<input type="text" name="id" hidden>
		 <div class="layui-form-item">
		    <label class="layui-form-label required">用户名</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="username" lay-verify="required|length"   lay-verType="tips"  data-minlen = "5"  data-maxlen="20"  autocomplete="off">
		    </div>
		  </div>
		  <div class="layui-form-item">
		    <label class="layui-form-label required">电话</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="text" name="mobile" lay-verify="required|phone"   lay-verType="tips"  data-minlen = "11"  data-maxlen="11"  autocomplete="off" >
		    </div>
		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label">邮箱</label>
		    <div class="layui-input-block">
		      <input class="layui-input" type="email" name="email"  lay-verify="email"   lay-verType="tips"  autocomplete="off">
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <label class="layui-form-label required">角色</label>
		    <div class="layui-input-block">
		      <div id="roleIds"></div>
		     </div>
  		  </div>
  		  <div class="layui-form-item">
		    <div class="layui-input-block" align="right"  style="height: auto">
		      <button type="submit" class="layui-btn ">保存</button>
		    </div>
		  </div>
		</form>
		</div>
	</script>
</body>

<script>
	var content = layui.content;
	var request = layui.request;
	var form = layui.form;
	var button = layui.button;
	var layer = layui.layer;
	var xmSelect = layui.xmSelect;
	var tableInst = null;
	var dialogHtml = $("#dialog").html();
	var dialogData = {
		handle: '',
		dialogIndex: '',
	};
	$(function () {
		var options = {
			elem: "#tableUser",
			layfilter: "tableUser",
			toolbar: '#toolbar',
			url: "user/search",
			cols: [[
				{field: 'username', title: '用户名'}, //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
				{field: 'mobile', title: '电话'},
				{field: 'email', title: '邮箱'},
				{field: 'createtime', title: '创建时间', align: 'center'},
				{fixed: 'right', title: '操作', templet: '#handbar', width: 150}
			]]
		};
		tableInst = content.initTable(options);
	})

	function add() {
		dialogData.handle = "user/add";
		dialogData.dialogIndex = content.dialog('添加用户', '600px', dialogHtml);
		request.post("role/listAll").then(res => {
			initSelect(res)
		})
	}

	function edit(row) {
		dialogData.handle = "user/edit";
		dialogData.dialogIndex = content.dialog('修改用户', '600px', dialogHtml);
		$("#dialogForm input[name='username']").addClass("layui-disabled").attr("disabled", "true")
		request.post('user/detail', {id: row.id}).then((res) => {
			var tempData = res.data;
			form.val("dialogForm", tempData)
			request.post("role/listAll").then(res => {
				var roleSel = initSelect(res);
				roleSel.setValue(tempData.roleIds)
			})
		})
	}

	function deleteHandle(row) {
		content.confirm("确认删除用户" + row.username, function () {
			request.postAlert("user/delete", {id: row.id}).then(res => {
				tableInst.reloadData();
			})
		})
	}

	function beforeSubmit() {
		var btn = button.load({elem: "#dialogForm button[type='submit']"});
		if (!form.validate(".layui-form")) {
			btn.stop();
			return false;
		}
		var data = form.val("dialogForm");
		data.roleIds = data.roleIds.split(",");
		request.postAlert(dialogData.handle, data).then(res => {
			layer.close(dialogData.dialogIndex);
			tableInst.reloadData();
		}).catch(err => {
			btn.stop();
		})
		return false;
	}

	function initSelect(data) {
		var chdata = data.data.map(function (item) {
			return {name: item.name, value: item.id};
		});
		return xmSelect.render({
			el: "#roleIds",
			name: "roleIds",
			layVerify: 'required',
			layVerType: 'tips',
			theme: {
				color:'var(--global-primary-color)',
			},
			data: chdata
		});
	}
</script>
<style scoped>
	.icon-edit {
		font-size: 20px;
		color: #2f60c2;
		margin-right: 10px;
	}

	.icon-dele {
		font-size: 20px;
		color: #ff5722;
		margin-right: 10px;
	}
</style>

</html>